<template>
    <div style="display:flex;justify-content:center;">
        <el-card style="width:50%">
            <el-form :model="form" label-width="80px" style="padding-right:30px" :rules="rules" ref="formRef">
                <div style="text-align:center;margin-bottom:30px;font-weight:bold;color:rgb(226, 70, 104)">订单管理（售书）</div>
                <el-form-item label="售书日期" prop="time">
                    <div class="block">
                        <el-date-picker
                            v-model="form.time"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期">
                        </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="售书编号" prop="isbn">
                    <el-input v-model="form.isbn" id="isbn"></el-input>
                </el-form-item>
                <el-form-item label="标价" prop="price" width="40px">
                    <div style="display: flex; align-items: center;">
                        <el-input v-model="price" id="price" disabled></el-input>
                        <el-button type="primary" @click="find" style="margin-left:30px;background-color:rgb(169, 200, 122);border:none">查询标价</el-button>
                    </div>
                </el-form-item>
                
                <el-form-item label="实际售价" prop="sprice">
                    <el-input v-model="form.sprice" id="sprice"></el-input>
                </el-form-item>
                <div style="text-align:center">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="update">售出</el-button>
                </div>
            </el-form>
        </el-card>
        <div id="app">
            <div class="res">
                <p class="p1">{{str}}</p>
                <p class="p2">{{resp}}</p>
            </div>
            <div class="key">
                <button class="a" @click='press'>+</button>
                <button class="a" @click='press'>-</button>
                <button class="a" @click='press'>*</button>
                <button class="a" @click='press'>/</button>
                <button class="b" @click='press'>9</button>
                <button class="b" @click='press'>8</button>
                <button class="b" @click='press'>7</button>
                <button class="b" @click='press'>6</button>
                <button class="b" @click='press'>5</button>
                <button class="b" @click='press'>4</button>
                <button class="b" @click='press'>3</button>
                <button class="b" @click='press'>2</button>
                <button class="b" @click='press'>1</button>
                <button class="c" @click='press'>0</button>
                <button class="c" @click='press'>C</button>
                <button class="c" @click='press'>=</button>
            </div>
        </div>
    </div>
</template>

<script>
export default{
    name:"Home",
    data(){
        return {
            str:'',
            resp:'',
            price:0,
            form:{},
            user:{},
            sell:{},
            book:{},
            rules:{
                time:[
                    {required:true,message:'请输入售书日期',trigger:'blur'}
                ],
                isbn:[
                    {required:true,message:'请输入书籍编号',trigger:'blur'}
                ],
                sprice:[
                    {required:true,message:'请输入实际售价',trigger:'blur'}
                ]
            },
        }
    },
    created(){

    },
    methods:{
        find(){
            if(!this.form.isbn){
                this.$message.error("请先输入ISBN")
            }else{
                this.$request.get('/book/selectByIsbn/'+this.form.isbn).then(res=>{
                    if(res.code==='200'){
                        if(res.data!=null){
                            this.price=res.data.price
                        }
                        else{
                            this.$message.error("该书籍编号不存在")
                            return
                        }
                    }else{
                        this.$message.error(res.msg)
                    }
                })
            }
        },
        press(event) {
            var key = event.target.textContent;
            if (key != '+' && key != '=' && key != '-' && key != '*' && key != '/' && key != 'C') {
                this.str += key;
            } else if (key === 'C') {
                this.str = '';
                this.resp = '';
            } else if (key === '+') {
                this.str += '+';
            } else if (key === '-') {
                this.str += '-';
            } else if (key === '*') {
                this.str += '*';
            } else if (key === '/') {
                this.str += '/';
            } else if (key === '=') {
                this.resp = eval(this.str); //eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码
            }
        },

        cancel(){
            this.form={
                time:'',
                isbn:'',
                sprice:''
            },
            this.price=0
            // 如果需要，清除验证错误信息
            this.$refs.formRef.resetFields();
        },
        update(){
            this.$refs.formRef.validate((valid) => {
                if (valid) {
                    this.sell.time=this.form.time
                    this.sell.isbn=this.form.isbn
                    this.sell.sprice=this.form.sprice
                    this.$request.get('/book/selectByIsbn/'+this.form.isbn).then(res=>{
                        if(res.code==='200'){
                            if(res.data!=null){
                                this.book=res.data
                                    if(this.book.state=="售出"){
                                        this.$message.error("该书已售出,请检查ISBN")
                                    }else{
                                        this.book.state="售出"
                                        this.book.sprice=this.form.sprice
                                        this.$request.put('/book/update',this.book).then(res=>{
                                            if(res.code==='200'){
                                                this.$message.success('成功')
                                                this.form={
                                                time:'',
                                                isbn:'',
                                                sprice:'',
                                                }
                                                this.price=0
                                            }else{
                                                this.$message.error(res.msg)
                                            }
                                        })
                                        this.$request.post('/sell/add',this.sell).then(res=>{
                                        if(res.code==='200'){
                                            //this.$message.success('保存成功')
                                        }else{
                                            
                                            this.$message.error(res.msg)
                                        }
                                        })
                                    }
                                
                            }
                            else{
                                this.$message.error("该书籍编号不存在")
                                return
                            }
                        }else{
                            this.$message.error(res.msg)
                        }
                    })

                }
            })
        },

    }
}
</script>

<style scoped>
#app {
    margin: 25px auto;
    padding: 5px;
    width: 200px;
    height: 300px;
    background-color: cyan;
}

.res {
    margin-bottom: 5px;
    height: 75px;
}

.res .p1 {
    padding-left: 5px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    background-color: darkorange;
}

.res .p2 {
    padding-right: 5px;
    height: 25px;
    line-height: 25px;
    background-color: greenyellow;
    text-align: right;
    font-size: 20px;
}

.key {
    height:220px;
    background-color: darksalmon;
}

.key .a {
    float: left;
    margin: 10px 5px 20px 5px;
    width: 40px;
    height: 25px;
    font-size: 15px;
}

.key .b {
    float: left;
    margin: 0 5px 15px 5px;
    width: 56px;
    height: 25px;
    font-size: 15px;
}

.key .c {
    float: left;
    margin: 5px;
    width: 56px;
    height: 25px;
    font-size: 15px;
}
</style>